<template>
	<view class="container">
		<view v-if="false"  class="cell">
			<view class="cell-top">
				青少年素质教育舒服画征集
			</view>
			<view class="cell-line">
				
			</view>
			<view class="cell-title">
				报名时间
			</view>
			<view class="cell-btns">
				<view class="cell-btn">{{dateStr}}</view>
			</view>
	<!-- 		<view class="cell-title">
				参数日期
			</view>
			<view class="cell-btns" style="margin-bottom: 0;">
				<view class="cell-btn">绘画</view>
				<view class="cell-btn">书法</view>
			</view> -->
		</view>
		<view  class="cell">
	<!-- 		<view  class="cell-one">
				<view  class="cell-one-txt">数量:</view>
				<view  class="cell-one-op">
					<u-number-box v-model="value" @change="valChange"></u-number-box>
				</view>
			</view> -->
			<view  class="cell-one">
				<view  class="cell-one-txt">姓名:</view>
				<view  class="cell-one-op">
				  <u--input
					placeholder="请输入姓名"
					border="surround"
					v-model="name"
				  ></u--input>
				</view>
			</view>
			<view  class="cell-one">
				<view  class="cell-one-txt">性别:</view>
				<view  class="cell-one-op">
				  <u-radio-group 
				      v-model="sex"
				      placement="row">
				  	<u-radio  label="男" name='0'></u-radio>
					&nbsp;&nbsp;&nbsp;
				  	<u-radio  label="女" name='1'></u-radio>
				  </u-radio-group>
				</view>
			</view>
			<view  class="cell-one">
				<view  class="cell-one-txt">电话号码:</view>
				<view  class="cell-one-op">
					<u--input
						maxlength="11"
						placeholder="请输入手机号码"
						border="surround"
						type="number"
						v-model="phone"
					></u--input>
				</view>
			</view>
			<view  class="cell-one">
				<view  class="cell-one-txt">身份证:</view>
				<view  class="cell-one-op">
					<u--input
						type="idcard"
						placeholder="请输入身份证"
						border="surround"
						v-model="card"
					></u--input>
				</view>
			</view>
			<view  class="cell-one">
				<view  class="cell-one-txt">年龄:</view>
				<view  class="cell-one-op">
					<u--input
						placeholder="请输入年龄"
						border="surround"
						type="number"
						v-model="age"
					></u--input>
				</view>
			</view>
			<view  class="cell-one">
				<view  class="cell-one-txt">省市区:</view>
				<view  class="cell-one-op">
					<picker mode="region" @change="onPickerChange">
						<view class="uni-input">{{shenAddress}}</view>
					</picker>
					
				</view>
			</view>
			<view  class="cell-one">
				<view  class="cell-one-txt">详细地址:</view>
				<view  class="cell-one-op">
					<u--input
						placeholder="请输入详细地址"
						border="surround"
						v-model="xiangAddress"
					></u--input>
				</view>
			</view>
		</view>
		
		
		<view class="kong">
			
		</view>
		
		<view class="btns">
			<!-- <view class="btn-l">
				实付金额: 
				<view class="money">
					￥233
				</view>
			</view> -->
			<view @click="onAdd" class="btn-r">
				保 存
			</view>
		</view>

	</view>
</template>

<script>
	import { playerAdd, playerInfo, playerEdit } from './indexServ.js'
	export default {
		name: 'template',
		data() {
			return{
				dateStr: (new Date()).getMonth() + 1 + '年' + (new Date()).getDate() + '日',
				keyword: '',
				show:false,
				id: '',
				name: '',
				sex: '0',
				card: '',
				phone: '',
				age: '',
				shenAddress: '请选择省市区',
				xiangAddress: ''
			}
		},
		onLoad(op) {
			console.log('----onload--')
			console.log(op)
			if(op.id){
				this.id = op.id
				this.GET_playerInfo({id: this.id})
			}
		},
		methods: {
			onAdd() {

				if(this.name == '') {
					uni.showToast({
						title:'请输入名称',
						icon: 'none'
					})
					return
				}
				if(this.card == '') {
					uni.showToast({
						title:'请输入身份证号码',
						icon: 'none'
					})
					return
				}
				if(this.phone == '') {
					uni.showToast({
						title:'请输入电话号码',
						icon: 'none'
					})
					return
				}
				if(this.age == '') {
					uni.showToast({
						title:'请输入年龄',
						icon: 'none'
					})
					return
				}
				if(this.shenAddress == '请选择省市区') {
					uni.showToast({
						title:'请选择省市区',
						icon: 'none'
					})
					return
				}
				if(this.xiangAddress == '') {
					uni.showToast({
						title:'请输入详细地址',
						icon: 'none'
					})
					return
				}
				let k = {
					  "address": this.shenAddress + '--' + this.xiangAddress,
					  "age": this.age,
					  "idCard": this.card,
					  "mobile": this.phone,
					  "openId": uni.getStorageSync('openid'),
					  "playName": this.name,
					  "sex": this.sex,
				}
				if (this.id) {
					this.POST_editPlay({id: this.id, ...k})
				} else{
					this.POST_addPlay(k)
				}

			},
			onPickerChange(e) {
				console.log('--onPickerChange-')
				console.log(e.detail.value)
				let arr = e.detail.value
				this.shenAddress = arr.join('-')
			},
			// playerInfo
			async POST_addPlay(k) {
				let res = await playerAdd(k)
				
				if(res.code == 200) {
					uni.showToast({
						title: '新增成功'
					})
				}
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				},2000)
			},
			async POST_editPlay(p) {
				let res = await playerEdit(p)
				
				if(res.code == 200) {
					
					uni.showToast({
						title: '编辑成功'
					})
				
				}
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				},2000)
			},
			async GET_playerInfo(p) {
				let res = await playerInfo(p)
				if(res.code == 200) {
					this.shenAddress = res.data.address.split('--')[0]
					this.xiangAddress = res.data.address.split('--')[1]
					this.age = res.data.prop1
					this.sex = res.data.prop2
					this.card = res.data.idCard
					this.phone = res.data.mobile
					this.name = res.data.playName
				}
				
			},
		
		}
	}
</script>
<style  lang="scss" scoped>
	.container{
		padding: 20rpx;
		box-sizing: border-box;
	}
	

	.cell{
		width: 100%;
		background: #fff;
		display: flex;
		flex-direction: column;
		margin-bottom: 40rpx;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 30rpx;
		.cell-top{
			width: 100%;
			background: #fff;
			// padding: 30rpx;
			box-sizing: border-box;
			font-size: 38rpx;
			font-weight: bold;
		}
		.cell-line{
			width: 100%;
			height: 2rpx;
			background: #f4f4f4;
			margin: 30rpx 0;
		}
		.cell-title{
			width: 100%;
			color: #333;
			font-size: 38rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}
		.cell-btns{
			width: 100%;
			align-items: center;
			margin-bottom: 40rpx;
			display: flex;
			.cell-btn{
				width: 320rpx;
				height: 60rpx;
				border-radius: 40rpx;
				background: #f4f4f4;
				margin-right: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				color:#454545;
			}
		}
		.cell-one{
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			.cell-one-txt{
				width: 180rpx;
			}
			.cell-one-op{
				flex: 1;
			}
		}
	}
	
			
	.kong{
		width: 100%;
		height: 120rpx;
	}
	.uni-input{
		
	}
	.btns{
		width: 100%;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #f7f7fa;
		display: flex;
		.btn-l{
			height: 100rpx;
			flex: 1;
			border-right: 2rpx solid #e1e1e1;
			border-top: 2rpx solid #e1e1e1;
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			box-sizing: border-box;
			color: #888888;
			font-size: 30rpx;
			.money{
				color: #e94f4f;
			}
		}
		.btn-r{
			width: 100%;
			height: 100rpx;
			background: $u-primary;
			border-top: 2rpx solid $u-primary;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 32rpx;
		}
	}
	
	

</style>